<template>
	<div class="congoods">
		<van-card :price="goodss_info[0].g_price+'.00'" :title="name" :thumb="$url+goodss_info[0].g_picture">
			<template #footer>
				<van-stepper v-model="goodss_info[0].g_count" v-if="count<=1?true:false" @change="onchanger"/>
			</template>
			<template #num v-if="count<=1?false:true">
				<span>一共{{count}}件商品</span>
			</template>
		</van-card>
		<van-cell is-link @click="showPopup" icon="notes-o">配送时间 : {{peisongtime}}</van-cell>
		<van-popup v-model="start_show" position="bottom" :style="{ height: '50%' }">
			<van-datetime-picker v-model="start_currentDate" type="date" title="选择年月日" :min-date="start_minDate"
				:max-date="start_maxDate" @confirm="start_sure" />
		</van-popup>
		<van-cell-group>
			<van-field v-model="value" label="备注" placeholder="请填写备注" />
		</van-cell-group>
		<!-- 优惠券单元格 -->
		<van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="shows" />
		<!-- 优惠券列表 -->
		<van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
			<van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
				@change="onChange" @exchange="onExchange" />
		</van-popup>
		<van-cell-group>
			<van-cell title="商品金额" :value="nums+'元'" />
		</van-cell-group>
		<van-submit-bar :price="nums*100" button-text="提交订单" @submit="onSubmit(times,goodss_info,nums,count)"
			text-align="left" />
	</div>
</template>

<script>
	const coupon = {
		available: 1,
		condition: '无使用门槛\n最多优惠12元',
		reason: '',
		value: 150,
		name: '优惠券名称',
		startAt: new Date().getTime(),
		endAt: new Date().getTime()+1000*60*60*24*30,
		valueDesc: '1.5',
		unitDesc: '元',
	};
	import Vue from 'vue';
	import {
		SubmitBar
	} from 'vant';
	import {
		DatetimePicker
	} from 'vant';
	import {
		Toast
	} from 'vant'
	import {
		Popup
	} from 'vant';
	import {
		Field
	} from 'vant';

	import {
		CouponCell,
		CouponList
	} from 'vant';
	import {
		Stepper
	} from 'vant';
	import {
		Icon
	} from 'vant';

	import {
		Card
	} from 'vant';
	import {
		tag
	} from 'vant'
	Vue.use(DatetimePicker);
	Vue.use(Popup);
	Vue.use(SubmitBar);
	Vue.use(Field);
	Vue.use(CouponCell);
	Vue.use(CouponList);
	Vue.use(Icon);
	Vue.use(Stepper);
	Vue.use(tag)
	Vue.use(Card);
	export default {
		data() {
			return {
				value: '',
				start_show: false,
				showList: false,
				//开始时间
				start_minDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
				start_maxDate: new Date(2025, 10, 1),
				start_currentDate: new Date(2021, 10, 18),
				chosenCoupon: -1,
				coupons: [coupon],
				disabledCoupons: [coupon],
				goodss_info: [],
				//总价格
				nums: 0,
				//总数量
				count: 0,
				// 选择时间
				times: '',
				//配送时间
				peisongtime:'',
				//统计优惠券
				you:0,
				name:''
				
			}
		},
		methods: {
			onchanger(){
				sessionStorage.setItem('goods',JSON.stringify({
					g_info:[{
						g_name:this.goodss_info[0].g_name,
						g_picture:this.goodss_info[0].g_picture,
						g_count:this.goodss_info[0].g_count,
						g_price:this.goodss_info[0].g_price,
						g_id:this.goodss_info[0].g_id
					}],
					u_id: this.$store.state.u_id
				}))
				this.nums = this.goodss_info[0].g_count*this.goodss_info[0].g_price
			},
			onSubmit(time, goods, total, count) {
				if(true){
					if (time == '') {
						time = new Date().toLocaleString()
					}
					//获取用户id去数据库提交订单
					var u_id = this.$store.state.u_id
					//获取地址id去提交订单
					var addressd = sessionStorage.getItem('addressd')
					if(addressd==null){
						alert('请选择地址')
					}else{
						var add_id = JSON.parse(addressd).id
						this.$http.post('/order/order', {
							time,
							goods,
							u_id,
							total,
							count,
							add_id
						}).then(res => {
							// console.log(res)
							if (res.data.code == 200) {
								this.$http.get('/goodscar/delall?u_id=' + u_id).then(data => {
									if (data.data.code == 200) {
										sessionStorage.clear()
										Toast.loading({
											message:'购买成功',
											duration:1000
										})
										setTimeout(()=>{
											this.$router.push('/')
										},1000)
									}
								})
							}
						})
					}
					// console.log(JSON.parse(addressd).id)
					
					
				}
			},
			showPopup() {
				this.start_show = true;
			},
			//获取开始时间选择的时间
			start_sure(value) {
				this.start_show = false
				this.times = value.toLocaleString()
				this.peisongtime = value.getFullYear()+'年'+(value.getMonth()+1)+'月'+value.getDate()+'日'
			},
			onChange(index) {
				this.showList = false;
				this.chosenCoupon = index;
				if(this.chosenCoupon==0){
					if(this.you==0){
						this.nums = this.nums - this.coupons[0].value/100
						this.you++
					}
				}
				if(this.chosenCoupon==-1){
					if(this.you!=0){
						this.nums = this.nums + this.coupons[0].value/100
						this.you=0
					}
				}
			},
			onExchange(code) {
				this.coupons.push(coupon);
			},
			shows() {
				this.showList = true
			}
		},
		mounted() {
			this.goodss_info= JSON.parse(sessionStorage.getItem('goods')).g_info
			let total = 0
			let count = 0
			let name = ''
			for (var i = 0; i < this.goodss_info.length; i++) {
				//总价
				total += this.goodss_info[i].g_price * this.goodss_info[i].g_count
				//总数量
				count += this.goodss_info[i].g_count
				//名称
				if(i<1){
					name += this.goodss_info[i].g_name+' '
				}else{
					name += '...'
					break;
				}
			}
			this.nums = total
			this.count =count
			this.name = name
		}
	}
</script>

<style scoped="scoped">
	.congoods {
		width: 100%;
	}
	.van-submit-bar {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    z-index: 100;
	    width: 100%;
	    padding-bottom: constant(safe-area-inset-bottom);
	    padding-bottom: env(safe-area-inset-bottom);
	    background-color: #fff;
	    -webkit-user-select: none;
	    user-select: none;
	}
</style>
